<script lang="ts" setup>
  import { onMounted, ref } from "vue";
  import { useMenuStore } from "@/stores";

  const modalVisible = ref(false);
  const menuStore = useMenuStore();
  const detail = ref<any>({});
  const menus = ref<any>([]);
  const searchForm = ref<any>({});

  onMounted(() => {
    fetchList();
  });

  async function fetchList() {
    menus.value = await menuStore.getMenus(searchForm.value);
  }
  async function handleRemove(record: any) {
    await menuStore.deleteMenu({ id: record.id });
    await fetchList();
  }

  function handleAdd() {
    detail.value = {};
    modalVisible.value = true;
  }

  function handleEdit(record: any) {
    detail.value = record;
    modalVisible.value = true;
  }

  async function handleSave() {
    await menuStore.saveMenu(detail.value);
    await fetchList();
    modalVisible.value = false;
  }

  async function handleSearch() {
    await fetchList();
  }

  async function handleReset() {
    searchForm.value = {};
    await fetchList();
  }

  async function handleSortChange(record: any) {
    await menuStore.saveMenu({
      id: record.id,
      sort: record.sort,
    });
    await fetchList();
  }
</script>

<template>
  <div class="page-container">
    <breadcrumb :items="['系统管理', '菜单列表']" />
    <a-card :bordered="false">
      <a-row :gutter="16">
        <a-col flex="400px" style="padding-right: 16px">
          <a-row :gutter="16">
            <a-col :span="24">
              <a-form-item label="菜单名称" style="margin-bottom: 0">
                <a-input placeholder="请输入菜单名称" v-model="searchForm.label"></a-input>
              </a-form-item>
            </a-col>
          </a-row>
        </a-col>
        <a-col flex="auto" style="border-left: 1px solid #e5e6eb; padding-left: 16px">
          <a-space>
            <a-button type="primary" @click="handleSearch()">搜索</a-button>
            <a-button type="primary" @click="handleReset()">重置</a-button>
          </a-space>
        </a-col>
      </a-row>
      <a-divider margin="16px"></a-divider>
      <a-button type="primary" style="margin-bottom: 16px" @click="handleAdd" size="small">新增</a-button>
      <a-table :data="menus">
        <template #columns>
          <a-table-column title="序号" :width="80">
            <template #cell="{ rowIndex }">
              {{ rowIndex + 1 }}
            </template>
          </a-table-column>
          <a-table-column title="菜单标签" data-index="label"></a-table-column>
          <a-table-column title="菜单名称" data-index="name"></a-table-column>
          <a-table-column title="菜单路径" data-index="path"></a-table-column>
          <a-table-column title="菜单排序" data-index="sort" :width="150">
            <template #cell="{ record }">
              <a-input-number v-model="record.sort" :min="0" :max="127" @change="handleSortChange(record)" />
            </template>
          </a-table-column>
          <a-table-column title="菜单图标" data-index="icon" :width="160"></a-table-column>
          <a-table-column title="操作" :width="120">
            <template #cell="{ record }">
              <a-space>
                <a-button type="primary" @click="handleEdit(record)" size="small">编辑</a-button>
                <a-button type="primary" status="danger" @click="handleRemove(record)" size="small">移除</a-button>
              </a-space>
            </template>
          </a-table-column>
        </template>
      </a-table>
    </a-card>
    <a-modal :visible="modalVisible" :title="detail.id ? '编辑菜单' : '新增菜单'" @cancel="modalVisible = false" @ok="handleSave">
      <a-form :model="{}" auto-label-width>
        <a-form-item label="菜单标签" required>
          <a-input v-model="detail.label"></a-input>
        </a-form-item>
        <a-form-item label="菜单路径" required>
          <a-input v-model="detail.path"></a-input>
        </a-form-item>
        <a-form-item label="菜单名称" required>
          <a-input v-model="detail.name"></a-input>
        </a-form-item>
        <a-form-item label="菜单排序">
          <a-input-number v-model="detail.sort" :default-value="0" :max="127" />
        </a-form-item>
        <a-form-item label="菜单排序">
          <a-switch v-model="detail.visible" checked-value="1" unchecked-value="0" />
        </a-form-item>
        <a-form-item label="菜单图标">
          <a-input v-model="detail.icon" />
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<style lang="less" scoped></style>
